
<!--员工管理-->
<template>
	<div>
		<el-tabs v-model="activeName2" type="card" >
			<el-tab-pane label="员工管理" name="first">
			</el-tab-pane>
		</el-tabs>
		<el-form :inline="true" ref="form" :model="pageAbout" style="margin-left:10px">
			<el-form-item  label="状态" prop="locked">
				<el-select  placeholder="请选择" v-model="pageAbout.locked">
					<el-option label="关闭" value="1"></el-option>
					<el-option label="正常" value="2"></el-option>
					<el-option label="修改密码后登陆" value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="账号" prop="loginName">
				<el-input placeholder="" v-model="pageAbout.loginName"></el-input>
			</el-form-item>
			<el-form-item label="姓名" prop="realName">
				<el-input placeholder="" v-model="pageAbout.realName"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="resetForm('form')">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="found">查找</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="add">新增</el-button>

			</el-form-item>
		</el-form>
		<div>
			<div class="dateMsg" v-if="pageCount">总计<b>{{pageCount}}</b>条数据</div>
			<el-table :data="tableData" style="width: 100%;margin-left:10px" v-loading="listLoading">
				<el-table-column prop="loginName" label="登录账号">
				</el-table-column>
				<el-table-column prop="realName" label="姓名">
				</el-table-column>
				<el-table-column prop="mobile" label="手机">
				</el-table-column>
				<!--<el-table-column prop="field" label="邮箱">-->
				<!--</el-table-column>-->
				<el-table-column prop="locked" label="状态" :formatter="banFormat">
				</el-table-column>
				<el-table-column prop="role_name" label="角色">
				</el-table-column>
				<el-table-column prop="date" label="操作" >
					<template scope="scope">
						<el-button type="text" size="small" @click="editEmp('editUser',scope.row.id)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!--分页器-->
			<div  style="width:200px;margin-left:80%;margin-top: 10px">
				<el-pagination @current-change="getCurrentpage"
							   :page-size="10"
							   layout="prev, pager, next"
							   :total="pageCount">
				</el-pagination>
			</div>
		</div>
		<!--新增用户-->
		<el-dialog title="新增用户" :visible.sync="dialogeShow.addNew" :modal="false" size="small" v-if="dialogeShow.addNew" :label-position="position">
			<el-form ref="form" :model="form" label-width="80px" :label-position="position" :rules="rules">
				<el-form-item label="登录账号" prop="loginName">
					<el-input v-model="form.loginName" style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" style="width: 200px"></el-input>
				</el-form-item>
				<!--<el-form-item label="确认密码" prop="makeSure">-->
					<!--<el-input v-model="form.makeSure" style="width: 200px"></el-input>-->
				<!--</el-form-item>-->
				<el-form-item label="姓名" prop="realName">
					<el-input v-model="form.realName" style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="手机" prop="mobile" :rules="[qfValidator.checkPhone()]">
					<el-input v-model="form.mobile" style="width: 200px"></el-input>
				</el-form-item>
				<!--<el-form-item label="邮箱" prop="mail">-->
					<!--<el-input v-model="form.mail" style="width: 200px"></el-input>-->
				<!--</el-form-item>-->
				<el-form-item label="角色" prop="sys_role_id">
					<el-select v-model="form.sys_role_id" placeholder="请选择">
						<el-option v-for="item in roleAll" :label="item.roleName" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<div style="width:200px;margin: 0 auto"><el-button type="primary" @click="submitForm('form','addNew')">确定</el-button></div>
			</el-form>
		</el-dialog>
		<!--编辑用户-->
		<el-dialog title="修改" :visible.sync="dialogeShow.editUser" :modal="false" size="small" v-if="dialogeShow.editUser">
			<el-form ref="formE" :model="formE" label-width="80px" :rules="rulesE">
				<el-form-item label="登录账号" prop="loginName">
					<el-input v-model="formE.loginName" style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="realName">
					<el-input v-model="formE.realName" style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="手机" prop="mobile">
					<el-input v-model="formE.mobile" style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="locked">
					<el-select  placeholder="请选择" v-model="formE.locked">
						<el-option label="关闭" value="1"></el-option>
						<el-option label="正常" value="2"></el-option>
						<el-option label="修改密码后登陆" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="角色" prop="sys_role_id">
					<el-select v-model="formE.sys_role_id" placeholder="请选择">
						<el-option v-for="item in roleAll" :label="item.roleName" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<!--<el-form-item label="密码">-->
					<!--<el-input v-model="formE.password" style="width: 200px"></el-input>-->
				<!--</el-form-item>-->
			</el-form>
			<div style="width:200px;margin: 0 auto"><el-button type="primary" @click="editSure('formE')">确定</el-button></div>
		</el-dialog>
	</div>
</template>
<script>
	import _http from '../common/http.vue'
	import personEdit from '@/components/working/common/personEdit.vue'
	import personCheck from '@/components/working/common/personCheck.vue'
	//富文本
	import '@/assets/ueditor/ueditor.config.js'
	import '@/assets/ueditor/ueditor.all.min.js'
	import '@/assets/ueditor/ueditor.parse.min.js'
	import '@/assets/ueditor/lang/zh-cn/zh-cn.js'
	export default{
		components:{personCheck,personEdit},

		data(){
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.form.makeSure !== '') {
						this.$refs.form.validateField('makeSure');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.form.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return{
				dialogeShow:{
					editUser:false,
					addNew:false,
					checkDiolage:false,
					editDiolage:false,
				},
				activeName2: 'first',
				position:'left',
				pageCount:'',
				rules: {
					loginName: [
						{ required: true, message: '请输入登录账号', trigger: 'blur' },
					],
					password: [
						{ required: true,message: '请输入密码', trigger: 'blur' }
					],
//					makeSure: [
//						{ required: true,validator: validatePass2, trigger: 'blur' }
//					],
					realName: [
						{ required: true, message: '输入姓名', trigger: 'change' }
					],
					mobile: [
						{  required: true ,message: '输入手机号', trigger: 'change'}
					],
//					mail: [
//						{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
//						{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
//					],
					sys_role_id: [
						{ required: true, message: '请填写角色', trigger: 'blur' }
					]
				},
				rulesE: {
					loginName: [
						{ required: true, message: '请输入登录账号', trigger: 'blur' },
					],
//					password: [
//						{ required: true,validator: validatePass, trigger: 'blur' }
//					],
//					makeSure: [
//						{ required: true,validator: validatePass2, trigger: 'blur' }
//					],
					realName: [
						{ required: true, message: '输入姓名', trigger: 'change' }
					],
					mobile: [
						{   required: true ,message: '输入手机号', trigger: 'change'}
					],
					locked: [
						{ required: true, message: '请选择状态', trigger: 'change' },
					],
					sys_role_id: [
						{ required: true, message: '请填写角色', trigger: 'change' }
					]
				},
				form: {
					password:'',
					makeSure:'',
					realName:'',
					mobile:'',
					sys_role_id: '',
					locked:''
				},
				formE:{
					loginName:'',
					realName:'',
					mobile:'',
//					password:'',
					locked:'',
					sys_role_id:""
				},
				listLoading:false,
				userid:'',
				currentPage:'',
				pageAbout:{
					pageNumber:1,
					pageSize:10,
					loginName:'',
					realName:'',
					locked:''
				},
				apiPort:{
//				分页数据接口
				roleList:'sysuser/v1/findAll',
				editList:'sysuser/v1/updateuser',
				roleGet:'role/v1/selectAll',
				goEdit:'sysuser/v1/getUserById',
			    upEdit:'sysuser/v1/updateuser',
				addUser:'sysuser/v1/adduser'
				},
				roleAll:[],
				tableData:[],
			}
		},
		mounted(){
			this.userid=localStorage.getItem('userId')
			this.pageAbout.userid = localStorage.getItem('userId')
			this.getCurrentpage(1)
			this.roleGet()
		},
		methods:{
//			新增员工
			add(){
				this.form= {
					password:'',
					makeSure:'',
					realName:'',
					mobile:'',
					sys_role_id: '',
					locked:''
				}
				this.showDio('addNew')

			},
			getCurrentpage(val){
				this.listLoading=true
				var that = this
				this.currentPage = val ? val:1
				this.pageAbout.pageNumber=this.currentPage
				var params = that.querystring.stringify(this.pageAbout)
				_http.axiosRequest(that,that.apiPort.roleList,params,(res)=>{
				that.pageCount=res.data.data.total
				console.log(res)
				this.listLoading=false
				that.tableData = res.data.data.records
			})
			},
			banFormat:function(row,column){
				var ban = row[column.property];
				if ( ban < 3 ){
					return ban==1?"关闭":'正常';
				}
				return "修改密码后登陆";
			},
			roleGet(){
				var that = this
				var params = that.querystring.stringify({userid:this.userid})
				_http.axiosRequest(that,that.apiPort.roleGet,params,(res)=>{
					console.log('所有角色')

					console.log(res.data.data)
				that.roleAll = res.data.data
			})
			},
//			编辑员工事件
			editEmp(parram,id){
				var that = this
				this.showDio(parram)
				var params = that.querystring.stringify({userid:this.userid,id:id})
				_http.axiosRequest(that,that.apiPort.goEdit,params,(res)=>{
			console.log('编辑回执')
				console.log(res.data.data)
				that.formE.loginName=res.data.data.loginName
//				that.formE.password=res.data.data.password
				that.formE.realName=res.data.data.realName
				that.formE.locked=res.data.data.locked
				that.formE.mobile=res.data.data.mobile
				that.formE.sys_role_id=res.data.data.sys_role_id
				that.formE.id=res.data.data.id
				that.formE.userid = that.userid
			})
			},
			editSure(formName){
				var that = this

				this.$refs[formName].validate((valid) => {
					if (valid) {
						var params = that.querystring.stringify(that.formE)
						_http.axiosRequest(that,that.apiPort.upEdit,params,(res)=>{
							console.log(res.data.code)
						if(res.data.code==100){
							that.$message({
								message:'编辑成功',
								type:'success'
							})
							that.getCurrentpage(that.currentPage)

						}else{
							that.$message({
								message:'操作失败',
								type:'waring'
							})
						}

					})
						setTimeout(function(){
							that.hideDio('editUser')
						},800)

					} else {
						console.log('error submit!!');
				return false;
			}
			});
			},
			submitForm(formName,param) {
				var that = this
				that.form.userid = that.userid
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var params = that.querystring.stringify(that.form)
						_http.axiosRequest(that,that.apiPort.addUser,params,(res)=>{
							console.log(res.data.msg)

							if(res.data.code==100){
							that.$message({
								message:'新增成功',
								type:'success'
							})
							setTimeout(function(){
								that.hideDio('addNew')
							},600)
							that.getCurrentpage(1)
						}else{
								that.$message({
									message:res.data.msg,
									type:'success'
								})
							}

					})
					} else {
						console.log('error submit!!');
				return false;
			}
			});
			},
//            重置按钮
			resetForm(formName){
				this.$refs[formName].resetFields();
			},
//			查找按钮
			found(){
				this.currentPage=1
				this.getCurrentpage(1)
			},
			showDio(parram){
				this.dialogeShow[parram]=true
			},
			hideDio(parram){
				this.dialogeShow[parram]=false
			},
			del() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
					type: 'success',
					message: '删除成功!'
				});
			}).catch(() => {
					this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
			}
		}

	}
</script>
<style>
	.dateMsg{
		padding-left: 20px;
		color: red;
		padding:10px
	}
</style>